<template>
	<view>
		<global-loading />
		<u-mask :show="show" z-index="10000">
			<view class="warp">
				<view class="rect" @tap.stop>
					<!-- 内容 -->
					<view class="imgBox">
						<view v-if="shareType==1" class="boxInner imgBoxShop"
							:style="{'backgroundImage':'url(' + image + ')'}"></view>
						<view v-else class="boxInner imgBoxProduct" :style="{'backgroundImage':'url(' + image + ')'}">
						</view>
					</view>
					<!-- 分享 -->
					<!-- 关闭按钮 -->
					<view class="guanbiView">
						<image @click="showcos" :src="`${VUE_APP_STATIC_URL}static/img/guanbi.png`" class="guanbi"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="fenx" :style="{'height':(isIphone === true? 140:130)+'rpx'}">
					<view class="linkBtnBox" hover-class="btn-click" @click="handleShareSelect">
						<image class="image" src="@/static/images/share/forward.png"></image>
						<view class="view"> 分享海报 </view>
					</view>
				</view>
			</view>
		</u-mask>
		<ShareSpell ref="shareSpell" :url="url" :img="image" :title="title" :album="true" @shareCancel="shareCancel" />
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from "vue";
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app";
	import {
		request
	} from '../../utils/request'
	import  API from "../../config/api";
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";
	import ShareSpell from '@/component/share.vue'

	const $getJumpParam = inject('$getJumpParam')
	const show = ref(true);
	const noMp = ref(false); // 是否非小程序
	const shareType = ref(1);
	const isIphone = ref(false);
	const shareSpell = ref({})
	const url = ref('')
	const image = ref('')
	const title = ref('')
	const shareObj = {
		url: '',
		image: '',
		title: '好友分享了一个很棒的商品',
		shareType: 0
	}
	onLoad((options) => {
		const param = $getJumpParam(options)
		console.log(JSON.stringify(param))
		isIphone.value = getApp().globalData.isIphone;
		if (param.title) {
			title.value = param.title
		}
		if (param.url) {
			url.value = param.url
		}
		if (param.img) {
			image.value = param.img
		}
		if (param.shareType) {
			shareType.value = param.shareType
		}
		shareObj.value = {
			title: title.value,
			image: image.value,
			url: url.value,
			shareType: shareType.value
		}
		// #ifndef MP
		noMp.value = true
		// #endif
	})

	const showcos = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	// ====================================================== 分享相关 =======================================================

	/**
	 * 关闭分享菜单
	 */
	function shareCancel() {
		shareSpell.value.shareShow = false
	}

	/**
	 * 选择分享菜单后
	 * @param index
	 */
	function handleShareSelect(index) {
		if (index === 0) {
			// 海报分享
			sharePoster()
		} else {
			shareSpell.value.shareShow = true
		}
	}

	function paocessWxShare(res) {
		let path = shareObj.value.url
		if (path.startsWith(API.shareLink)&&path.includes('pages')) {
			path = path.substring(path.indexOf('pages'))
		}
		return {
			path: path,
			title: shareObj.value.title,
			imageUrl: shareObj.value.image,
		}
	}
	onShareAppMessage((res) => {
		return paocessWxShare(res)
	})

	onShareTimeline((res) => {
		return paocessWxShare(res)
	})
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.rect {
			background-color: rgba(0, 0, 0, 0);
			flex: 1;
			align-items: center;
			justify-content: center;
			margin-top: 226rpx;

			.imgBox {

				.boxInner {
					display: inline-block;
					background-size: contain !important;
					background-position: center top !important;
					background-repeat: no-repeat !important;
				}

				.imgBoxShop {
					min-height: 814upx;
					min-width: 426upx;
				}

				.imgBoxProduct {
					min-height: 700upx;
					min-width: 426upx;
				}
			}

			.guanbiView {
				align-items: center;
				justify-content: center;
				text-align: center;

				.guanbi {
					width: 60rpx;
					height: 60rpx;
				}
			}

		}

		.fenx {
			background-color: #F7F7F7;
			width: 100%;
			color: #343434;
			margin-top: 101rpx;

			.linkBtnBox {
				text-align: center;
				display: flex;
				flex-direction: row;
				vertical-align: middle;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				padding-bottom: 45rpx;

				.image {
					width: 50rpx;
					height: 50rpx !important;
					display: inline-block;
					margin-right: 20rpx;
				}
			}

		}
	}
</style>